﻿<template>
    <div class='app-container'>
      <div class="app-box">
    	<div class='clearfix1'>
	    <el-form label-width="80px">
	        <el-form-item label="保险公司：" prop='insurance' class='inputtitle'>
	          <el-select v-model="insurance" placeholder="请选择保险公司" class='inputbox' size='mini'  @change='getinsurancestaffs' v-loading="loading2">
	           <el-option-group v-for="group in items" :key="group.letter" :label="group.letter">
	              <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName
	      " :value="item.id">
	              </el-option>
	          </el-option-group> 
	          </el-select>
	        </el-form-item>
	    </el-form>
	    </div>
        <div class='logblog clear'>
			<!--el循环列表数据-->
			<el-table :data="list" style="width: 100%;" class='uti-table policyapp-table' stripe v-loading="loading">
				<el-table-column  slot="empty">
	        		<div class="nodata">
	        			暂无数据
	        		</div>
	        	</el-table-column>
					
				<!--批次信息-->
                <el-table-column label="批次信息" prop="batchName + effectiveDate + expiryDate" width="">
					<template scope="scope">
						<a class="batchName">
   							<router-link v-if="scope.row.batchCategory==1 && scope.row.batchType !== 2"  class='pici lianjie batch' 
   								:to="{ name: 'policyupper3c_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		 {{scope.row.batchName}}<span   v-if="scope.row.isReward" class="grade">奖励</span>
	                        </router-link> 
													<router-link v-if="scope.row.batchCategory==1 && scope.row.batchType == 2"  class='pici lianjie batch' 
   								:to="{ name: 'policyupper3s_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		 {{scope.row.batchName}}<span  v-if="scope.row.isReward" class="grade">奖励</span>
	                        </router-link> 
   							<router-link v-if="scope.row.batchCategory==2 && scope.row.batchType !== 2"  class='pici lianjie batch' 
   								:to="{ name: 'policylower3_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		 {{scope.row.batchName}}<span  v-if="scope.row.isReward" class="grade">奖励</span>
	                       </router-link>
												 <router-link v-if="scope.row.batchCategory==2 && scope.row.batchType == 2"  class='pici lianjie batch' 
   								:to="{ name: 'policylower3s_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		 {{scope.row.batchName}}<span  v-if="scope.row.isReward" class="grade">奖励</span>
	                       </router-link>
						</a>
						
						
						
						<p class="batchTime">有效期：{{scope.row.effectiveDate}}&nbsp;到&nbsp;{{scope.row.expiryDate!==null?scope.row.expiryDate : '不限'}}
						</p>
						<!--<p class="batchTime" v-if="scope.row.expiryDate==null">有效期：
							{{scope.row.effectiveDate}}&nbsp;到&nbsp;不限
						</p>-->
					</template>
				</el-table-column>
				<!--保险公司-->
                <el-table-column prop="insuranceName" label="保险公司" width="170">
                	<template slot-scope="scope">
                		<p class="insuranceName">{{scope.row.insuranceName}}</p>
                	</template>
                </el-table-column>
				<!--适用工号-->
                <el-table-column prop="staffs" label="适用工号" width="200">
					<template  slot-scope='scope' >
	                    <!-- <span v-if="scope.row.staffs.length==1">{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})</span> -->	                       
	                        <!-- <el-tooltip placement="bottom" effect="light" v-if="scope.row.staffs.length>1">
	                         <div slot="content" v-for='item in scope.row.staffs' class="prompt">{{item.staffAccount}}&nbsp;({{item.describe}})</br></div>
	                         <span >{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})...</span>
	                        </el-tooltip>
	                        <el-badge :value="scope.row.staffs.length" :max="99" class="item" v-if="scope.row.staffs.length>1">
	                        </el-badge>

                           <div>{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})</div> -->
                        <!-- <el-tooltip placement="bottom" effect="light" v-if="scope.row.staffs.length>1" class='item1'>
                         <div slot="content" v-for='item in scope.row.staffs' class='prompt'>{{item.staffAccount}} &nbsp; ({{item.describe}})</br></div>
                        <span class='morelist'>更多...</span>
                        </el-tooltip> -->
                        <div>{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})</div>
                        <el-tooltip placement="bottom" effect="light" v-if="scope.row.staffs.length>1" class='item1'>
                         <div slot="content" v-for='item in scope.row.staffs' class='prompt'>{{item.staffAccount}} &nbsp; ({{item.describe}})</br></div>
                        <span class='morelist'>更多...</span>
                        </el-tooltip>
	                </template>

				</el-table-column>
				
				<!--上下游-->
				<el-table-column prop="batchCategory" label="上/下游" width="170">
					<template scope="scope">
						<p v-if="scope.row.batchCategory==1">上游</p>
						<p v-if="scope.row.batchCategory==2">下游</p>
					</template>
				</el-table-column>
				<!--操作-->
                <el-table-column label="操作" width="120" align='right'> 
					 <template slot-scope="scope">
						<a type="text" size="small" style="text-align: right;" class="toapprovalDetailBtn">
							<router-link v-if="scope.row.batchCategory==1 && scope.row.batchType !== 2"  class='pici lianjie batch' 
   								:to="{ name: 'policyupper3c_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		查看详情
	                        </router-link> 
													<router-link v-if="scope.row.batchCategory==1 && scope.row.batchType == 2"  class='pici lianjie batch' 
   								:to="{ name: 'policyupper3s_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		查看详情
	                        </router-link> 
   							<router-link v-if="scope.row.batchCategory==2 && scope.row.batchType !== 2"  class='pici lianjie batch' 
   								:to="{ name: 'policylower3_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		 查看详情
	                       </router-link>
												 <router-link v-if="scope.row.batchCategory==2 && scope.row.batchType == 2"  class='pici lianjie batch' 
   								:to="{ name: 'policylower3s_approval', query: { batchId: scope.row.batchId,Jurisdiction:2,page:true}}">
	                       		 查看详情
	                       </router-link>
							</a>
						
						
					  </template>
				</el-table-column>
            </el-table>
			<!--el循环列表数据end-->
            <div v-if="list.length!=0" class='page-right'>
                <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'></el-pagination>

            </div>

        </div>
        
      <router-view/>
      </div>
    </div>
    
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
.logblog {
  .morelist{
    color: #027dca;
  }
  font-size: 13px;
  border-radius: 3px;
  background: #fff;
  position: relative;
  .inputbox {
    .fontcolor {
      color: #999;
      margin-right: 8px;
    }
  }
  .el-table th.is-leaf{
	background: #334750;
	margin-top: 32px;
	color:#fff;
	.cell{
		color:#fff;text-align:center
	}
  }
  
  
}
.page-right{
        width: 100%;
        text-align: right;
        margin-top: 50px;
    }
.grade{background: #ff7819;color: #FFFFFF;font-size: 12px !important;padding: 2px 5px !important;border-radius: 8px;display: inline-block;margin: 0 0 0 6px !important;line-height: 1;}
.policyapp-table{font-size: 13px;color: #333333;}
.batchName{height: 26px;margin: 0 !important;font-size: 14px;color: #027dca;font-weight: 600;display: inline-block;}
.batchName:hover{color: #027dca;text-decoration: underline;cursor: pointer;}
.batchTime{font-size: 12px;height: 29px;margin: 0 !important;color: #666666;}
.insuranceName{font-size: 16px;color: #333333;}
.policyapp-table .el-table_1_column_2{font-size: 16px;}

.toapprovalDetailBtn{font-family: PingFangSC-Regular;font-size: 13px;color: #027DCA;}
.prompt{
    margin-top:5px;
}
.clearfix1{height: 28px;margin-bottom: 30px;}
.clearfix1:after{
        content:'';
        display:block;
        clear: both;
    }
    .nodata{
    	    color: #97a8be;
    	    font-size:18px;
    	    margin-top:-50px;
    }
</style>
<style>
	.policyapp-table .el-table_1_column_2 .cell{font-size: 16px;}
</style>
<script>
export default {
  data() {
    return { 
      pagetotal: null,
      data: {},
      list: [],
      listLoading: true,
      value: [],
      currentPage: 1,
      insurance:'',
      loading:false,
      loading2:false,
      page:1
    };
  },
  created() {
  	this.groupList();
  	if (this.$route.query.page) {
  		this.page = this.$route.query.page;
  	}
  	if (this.$route.query.ins) {
  		this.insurance = this.$route.query.ins;
  	}
    this.fillDate();
  },
  watch:{
  	'$route' (to,from){
  		this.page = this.$route.query.page;
  		this.insurance = this.$route.query.ins;
  		this.fillDate();
  	}
  },
  methods: {
    
    fillDate() {
	let params={
        pageIndex:this.page,
        insuranceId:this.insurance
    };    	
	  this.loading=true;
      this.post(params, "services/app/policy/GetPolicyBatchApprovedList").then(
        response => {
			
          if (response.success) {
			this.loading=false;
            this.list = response.result.items;
			console.log(this.list);
            this.pagetotal = response.result.totalCount;
			this.currentPage = this.page;
          }
        }
      );
    },
   //获取保险公司
    groupList(){
    	this.loading2=true;
       let all = { letter: "", insurances: [{insuranceName:'全部保险公司',id:''}] };
       let params = {
        // id:val,
       }
       this.post(params, 'services/app/common/GetGroupInsurances').then(re => {
          if(re.success) {
          	this.loading2=false;
           this.items=re.result.items
           let result=re.result.items
           result.unshift(all);
           console.log("success")
           console.log(this.items)
           this.options1= result;
          }
        });
    },
    getinsurancestaffs(val){
    	console.log(val)
    	this.$router.push({
      	name:'approval',
      	query:{
      		page:1,
      		ins:val
      	}
      })
    },
    
    handleCurrentChange(val) {
      this.$router.push({
      	name:'approval',
      	query:{
      		page:val,
      		ins:this.insurance
      	}
      })
    }
  }
};
</script>

